<template>
    <div class="list-page">
        <!-- <div class="title-content">任务中心</div> -->
        <div class="tab-container">
            <div :class="query.isComplete == 0 ? 'tab-active' : 'tab-common'" @click="stateChange(0)">待处理</div>
            <div :class="query.isComplete == 1 ? 'tab-active' : 'tab-common'" @click="stateChange(1)">已处理</div>
        </div>
        <div class="list-content">
            <el-table ref="datagrid" :data="table.data" border>
                <el-table-column prop="taskId" label="任务单号" min-width="200" show-overflow-tooltip />
                <el-table-column prop="taskName" label="任务类型" min-width="200" show-overflow-tooltip />
                <el-table-column prop="taskCreator" label="申请人" min-width="140" show-overflow-tooltip />
                <el-table-column prop="taskStateName" label="任务状态" min-width="200" show-overflow-tooltip />
                <el-table-column prop="taskHandlerName" label="处理人" min-width="140" show-overflow-tooltip />
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="180"
                    :formatter="formatUtil.gridDatetimeFormat"
                />
                <!-- <el-table-column prop="isComplete" label="任务状态" :formatter="stateFmt" /> -->
                <el-table-column fixed="right" label="操作" width="140">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            v-if="scope.row.isComplete === 0 && scope.row.taskHandler === currentUser"
                            @click="review(scope.row)"
                            size="small"
                        >
                            处理
                        </el-button>
                        <el-button
                            v-if="scope.row.isComplete === 0 && scope.row.taskHandler !== currentUser"
                            @click="detail(scope.row)"
                            size="small"
                        >
                            查看
                        </el-button>
                        <el-button v-if="scope.row.isComplete === 1" @click="detail(scope.row)" size="small">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="list-footer">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.pagination.currentPage"
                :page-sizes="table.pagination.pageSizes"
                :page-size="table.pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="table.pagination.total"
            ></el-pagination>
        </div>
        <!-- 立项审批 -->
        <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'PROJECT'" class="list-form-modal">
                <ProjectFiledForm :taskId="selectedId" @close="closeInfoWindow"></ProjectFiledForm>
            </div>
        </transition>
        <!-- 合同申请 -->
        <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'CONTRACT'" class="list-form-modal">
                <ContractFiledForm :taskId="selectedId" @close="closeInfoWindow"></ContractFiledForm>
            </div>
        </transition>
        <!-- 发票申请 -->
        <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'FAPIAO'" class="list-form-modal">
                <FapiaoFiledForm :taskId="selectedId" @close="closeInfoWindow"></FapiaoFiledForm>
            </div>
        </transition>
        <!-- 耗材申请 -->
        <transition name="slide-fade">
            <div
                v-if="showInfoWindow && (selectedTaskType === 'MATERIAL_PROD' || selectedTaskType === 'MATERIAL_WORK')"
                class="list-form-modal"
            >
                <MaterialFiledForm :taskId="selectedId" @close="closeInfoWindow"></MaterialFiledForm>
            </div>
        </transition>
        <!-- 设备采购 -->
        <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'DEVICE_PURCHASE'" class="list-form-modal">
                <DevicePurchaseForm :id="selectedId" @close="closeInfoWindow"></DevicePurchaseForm>
            </div>
        </transition>
        <!-- 设备调度 -->
        <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'DEVICE_DISPATCH'" class="list-form-modal">
                <DeviceDispatchForm :id="selectedId" @close="closeInfoWindow"></DeviceDispatchForm>
            </div>
        </transition>
        <!-- 设备维修 -->
        <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'DEVICE_MAINTAIN'" class="list-form-modal">
                <DeviceMaintainForm :id="selectedId" @close="closeInfoWindow"></DeviceMaintainForm>
            </div>
        </transition>
        <!-- 设备报废 -->
        <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'DEVICE_DISCARD'" class="list-form-modal">
                <DeviceDiscardForm :id="selectedId" @close="closeInfoWindow"></DeviceDiscardForm>
            </div>
        </transition>
        <!-- 主投标 -->
        <!-- <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'bid_par'" class="list-form-modal">
                <BidExamine :taskId="selectedId" :taskType="selectedTaskType" @goBack="closeInfoWindow"></BidExamine>
            </div>
        </transition> -->
        <!-- 子投标 -->
        <!-- <transition name="slide-fade">
            <div v-if="showInfoWindow && (selectedTaskType === 'bid_bus' || selectedTaskType==='bid_tech')" class="list-form-modal">
                <SubBidExamine :taskId="selectedId" :taskType="selectedTaskType" @goBack="closeInfoWindow"></SubBidExamine>
            </div>
        </transition> -->
        <transition name="slide-fade">
            <div
                v-if="
                    showInfoWindow &&
                    (selectedTaskType == 'BID_MAIN' || selectedTaskType == 'BID_TECH' || selectedTaskType == 'BID_BUS')
                "
                class="list-form-modal"
            >
                <BidsForm :id="selectedId" :bidsType="selectedTaskType" @close="closeInfoWindow"></BidsForm>
            </div>
        </transition>
        <!-- 经营用品 -->
        <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'SUPPLIES'" class="list-form-modal">
                <JySuppliesForm :id="selectedId" @close="closeInfoWindow"></JySuppliesForm>
            </div>
        </transition>
        <!-- 经营维护 -->
        <!-- <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'act_maintain'" class="list-form-modal">
                <JyMaintainForm :id="selectedId" @close="closeInfoWindow"></JyMaintainForm>
            </div>
        </transition> -->
        <!-- <transition name="slide-fade">
            <div v-if="showInfoWindow && selectedTaskType == 'revenue_distribution'" class="list-form-modal">
                <RevenueExamine :taskId="selectedId" @goBack="closeInfoWindow" formTitle="详情" taskType="revenue_distribution"></RevenueExamine>
            </div>
        </transition> -->
    </div>
</template>
<script setup>
import { ref, toRefs, reactive, onMounted } from 'vue'
import http from '@/http.js'
import formatUtil from '@/utils/format.js'
// 运营管理
import ProjectFiledForm from '@/pages/yunying/form/ProjectFiledForm.vue'
import ContractFiledForm from '@/pages/yunying/form/ContractFiledForm.vue'
import FapiaoFiledForm from '@/pages/yunying/form/FapiaoFiledForm.vue'
import MaterialFiledForm from '@/pages/yunying/form/MaterialFiledForm.vue'
// 设备
import DeviceDiscardForm from '@/pages/device/form/DeviceDiscardForm.vue'
import DeviceDispatchForm from '@/pages/device/form/DeviceDispatchForm.vue'
import DeviceMaintainForm from '@/pages/device/form/DeviceMaintainForm.vue'
import DevicePurchaseForm from '@/pages/device/form/DevicePurchaseForm.vue'
// 经营管理
// import BidExamine from '@/components/jingying/BidExamine.vue'
// import SubBidExamine from '@/components/jingying/SubBidExamine.vue'
import BidsForm from '@/pages/jingying/form/BidsForm.vue'
import JySuppliesForm from '@/pages/jingying/form/JySuppliesForm.vue'
// import JyMaintainForm from '@/components/jingying/JyMaintainForm.vue'
// 营收梳理
// import RevenueExamine from '@/components/jixiao/RevenueExamine.vue'
import homedata from '@/utils/homedata.js'

const datagrid = ref(null)

const currentUser = localStorage.getItem('username')

const table = reactive({
    data: [],
    selected: [],
    pagination: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        total: 0
    }
})

const query = reactive({
    isComplete: 0
})

const selectedId = ref('')

const selectedTaskType = ref('')

const showInfoWindow = ref(false)

const handleSizeChange = (val) => {
    table.pagination.pageSize = val
    loadData()
}

const handleCurrentChange = (val) => {
    table.pagination.currentPage = val
    loadData()
}

const handleClickTableRow = (row) => {
    datagrid.value.clearSelection()
    datagrid.value.toggleRowSelection(row)
}

const stateFmt = (row, column, cellValue, index) => {
    let data = row[column.property]
    if (data == 0) {
        return '待处理'
    } else {
        return '已处理'
    }
}

const stateChange = (param) => {
    query.isComplete = param
    table.currentPage = 1
    table.pageSize = 10
    loadData()
}

const loadData = () => {
    let params = {
        isComplete: query.isComplete,
        page: table.pagination.currentPage,
        pageSize: table.pagination.pageSize
    }
    http.fetchForm({
        url: '/center/task/queryGrid',
        data: params
    }).then((res) => {
        table.data = res.data.grid
        table.pagination.total = res.data.total
    })
}

const closeInfoWindow = () => {
    showInfoWindow.value = false
    homedata.loadNotify()
    loadData()
}

const review = (row) => {
    selectedId.value = row.taskId
    selectedTaskType.value = row.taskType
    showInfoWindow.value = true
}

const detail = (row) => {
    selectedId.value = row.taskId
    selectedTaskType.value = row.taskType
    showInfoWindow.value = true
}

// mounted
onMounted(() => {
    loadData()
})
</script>
<style scoped>
@import '@/assets/css/list-page.css';

.title-content {
    padding: 20px 10px 10px 10px;
    font-size: 20px;
    color: #464c5b;
}

.tab-container {
    padding: 20px 10px 0 10px;
    display: flex;
}

.tab-active {
    background: #4875ae;
    color: #fff;
}

.tab-common {
    background: #9d9d9d;
    color: #fff;
}

.tab-common,
.tab-active {
    width: 100px;
    padding: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: lighter;
    cursor: pointer;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
</style>
